<template>
    <el-drawer v-model="childConfig.DrawerStatus" :title="childConfig.title" @open="handleOpen" :before-close="handleClose" size="50%">
        <el-form ref="ruleForm" label-width="100px" :model="formData" label-position="top" :rules="rules">
            
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item >
                        <el-button type="primary" @click="methods.synchronousData">同步用户信息</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <el-input v-model="formData.username" placeholder="请输入姓名" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-select v-model="formData.ssex" placeholder="空" disabled  class="file-name">
                            <el-option v-for="item in userData.sex" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机">
                        <el-input v-model="formData.mobile" placeholder="请输入手机" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="员工工号">
                        <el-input v-model="formData.jobNumber" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="企业邮箱">
                        <el-input v-model="formData.email" placeholder="请输入企业邮箱" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-model="formData.roleId" placeholder="请选择角色" class="file-name">
                            <el-option v-for="item in userData.roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据范围" prop="dataScope">
                        <el-select v-model="formData.dataScope" placeholder=""  class="file-name">
                            <el-option v-for="item in userData.dataScopeStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门">
                        <el-input v-model="formData.deptName" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="直属领导">
                        <el-input v-model="formData.managerUserName" placeholder="请输入部门" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="员工状态">
                        <el-select v-model="formData.ddStatus" disabled class="file-name">
                            <el-option v-for="item in userData.employeeStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职日期">
                        <el-input v-model="formData.hiredDate" placeholder="请输入部门" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账号状态" prop="status">
                        <el-radio-group v-model="formData.status"  class="file-name">
                            <el-radio v-for="item in userData.accountStatusList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>

        <div class="drawer-footer">
            <el-button @click="handleClose(false)">取消</el-button>
            <el-button type="primary" @click="confirmButtonHandle">确定</el-button>
        </div>
    </el-drawer>
    
</template>


<script setup>
import {reactive, toRefs, ref, computed} from 'vue'
import { useStore } from 'vuex'
import {getDingTalkUserInfo, upUserData, details} from '^/organization/user.js'

// 获取用户数据
const store = useStore()
const userData = computed(() => store.getters.user)

// 接收父组件值
const props = defineProps({
    childConfig: {
        type: Object
    },
    formData: {
        type: Object
    }
})
// 在定义emits的事件，才能通过emits给指定的事件修改父组件的值
const emits = defineEmits(['upDrawerStatus', 'upViewList'])

// 接收父组件值
const {childConfig, formData} = toRefs(props)

const ruleForm = ref(null)


// 表单校验
const rules = reactive({
    dataScope: [{ required: true, message: '数据范围不能为空', trigger: 'blur' }],
    roleId: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '账号状态不能为空', trigger: 'blur' }]
})
  

/**
 * 接口api
 */

const methods = {
    editHandleApi: () => {
        ruleForm.value.validate((vaild) => {
            
            if (vaild){
                const {userId, roleId, status, dataScope} = formData.value
                upUserData({userId, roleId, status, dataScope}).then(res => {
                    console.log("更新", res.data.data, res.data.message)
                    handleClose()
                }, err => {
                    console.log("更新异常", err)
                })
            }
        })
    },
    detailsHandleApi: () => {
        console.log('查看详情')
        details(formData.value.userId).then(res => {
            console.log("详情", res.data, res.message)
            
            formData.value = res.data
            console.log(res.data.roleId, formData.value)
        }, err => {
            console.log("详情异常", err)
        })
    },
    synchronousData: () => {
        getDingTalkUserInfo(formData.value.userId).then(res => {
            console.log("用户数据同步", res.data.data, res.data.message)
            methods.detailsHandleApi()
        }, err => {
            console.log("用户数据同步异常", err)
        })
    }
}


/**
 * 界面操作api
 */
/**
 * 
 */
const handleClose = (isUpdate = true) => {
    console.log('关闭抽屉')
    emits('upDrawerStatus', false)
    isUpdate && emits('upViewList')
}
const confirmButtonHandle = () => {
    methods[childConfig.value.confirmFunctionName]()
}
const handleOpen = () => {
    // 初始化函数存在就执行
    childConfig.value.initFunctionName && methods[childConfig.value.initFunctionName]()
}
</script>


<style lang="scss" scoped>
.drawer-footer{
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.file-name{ 
    width: 100%;
}
</style>